import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Form, Input } from 'antd';
import React from 'react';
import { message } from 'antd/es';
import { history } from 'umi';
import { loginUser } from '../../services/userServices';
import './rightCol.css';

class RightCol extends React.PureComponent {
  constructor(props) {
    super(props);
  }

  onFinish = async (values) => {
    const { username = '', password = '' } = values;
    try {
      const response = await loginUser(username, password);
      const { data } = response;
      const { token } = data;
      localStorage.setItem('Authorization', 'Bearer ' + token);
      message.info('Login successful');
      history.push('/Demo2');
    } catch (error) {
      message.error(error.message || 'Failed to login');
    }
  };

  render() {
    return (
      <>
        <div>
          <div id="login-title">医院陪护系统管理平台</div>
          <div id="login-content">用户登录
            <Form
              name="normal_login"
              className="login-form"
              size="large"
              initialValues={{
                remember: true,
              }}
              onFinish={this.onFinish}
            >

              <Form.Item
                name="username"
                // label="Username"
                size="large"
                rules={[
                  {
                    required: true,
                    message: 'Please input your Username!',
                  },
                ]}
              >
                <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
              </Form.Item>

              <Form.Item
                name="password"
                rules={[
                  {
                    required: true,
                    message: 'Please input your Password!',
                  },
                ]}
              >
                <Input.Password
                  size="large"
                  prefix={<LockOutlined className="site-form-item-icon" />}
                  placeholder="Password"
                />
              </Form.Item>

              <Form.Item>
                <Button type="primary" htmlType="submit" className="login-form-button">
                  登录
                </Button>
              </Form.Item>
            </Form>
          </div>
          <div id="login-footer">Copyright @ Versions: 2024/01/01</div>
        </div>
      </>
    );
  }
}

export default RightCol;
